<template>
  <div style="margin-bottom: 10px">
    <!-- 查询页面的提示信息 -->
    <el-alert title="这里是页面扩展的组件" type="success" show-icon> </el-alert>
    <!-- 弹出框1-->
    <vol-box
      :lazy="true"
      v-model="model"
      title="弹出框1"
      :height="400"
      :width="700"
      :padding="15"
    >
      <div>
        弹出框1内容,<el-button
          type="primary"
          size="small"
          @click="model1BtnClick"
          >刷新页面</el-button
        >
      </div>
      <template #footer>
        <div>
          <el-button type="primary" size="mini" @click="model = false"
            >确认</el-button
          >
          <el-button type="default" size="mini" @click="model = false"
            >关闭</el-button
          >
        </div></template
      >
    </vol-box>
    <!-- 弹出框2 -->
    <vol-box
      :lazy="true"
      v-model="model2"
      title="弹出框2"
      :height="400"
      :width="700"
      :padding="15"
    >
      <div>弹出框2内容</div>
      <template #footer>
        <div>
          <el-button type="primary" size="mini" @click="model2 = false"
            >确认</el-button
          >
          <el-button type="default" size="mini" @click="model2 = false"
            >关闭</el-button
          >
        </div></template
      >
    </vol-box>
  </div>
</template>

<script>
import VolBox from '@/components/basic/VolBox.vue';
export default {
  components: { 'vol-box': VolBox },
  data() {
    return {
      model: false,
      model2: false
    };
  },
  methods: {
    //按钮1点击弹出框
    openModel1(param) {
      //可以自己传一些参数
      console.log(param);
      this.model = true;
    },
    //按钮2点击弹出框
    openModel2() {
      this.model2 = true;
    },
    model1BtnClick() {
      //弹出框1中的按钮
      //通过this.$emit('parentCall'获取生成页面的所有对象属性
      this.$emit('parentCall', ($parent) => {
        //调用生成页面的查询方法
        $parent.search();
      });
      this.model = false;
    }
  }
};
</script>

<style></style>
